<template>
  <label class="rx-checkbox" :class="{
    'is-checked':this.isChecked,
    'is-disabled':this.disabled
  }" @click="updateValue">
    <!-- 显示出来的方框 -->
    <span class="rx-checkbox__box" >
      <span class="rx-checkbox__inner"></span>
      <!-- <input type="checkbox" class="rx-checkbox__input" :value="value" @click="stopPropagation"> -->
    </span>
    <!-- label -->
    <span class="rx-checkbox__label">
      <slot></slot>{{label}}
    </span>
  </label>
</template>
<script>
import {toggle as arrayToggle} from '@rxTools/ext/array';

export default {
  name: "rx-checkbox",
  props: [
    //[Boolean, Array] 布尔值，或者数组（表单多选时），v-model绑定值
    "value",
    // 当value为数组时，需要提供cvalue字段，表明当前checkbox的值
    "cvalue",
    //String 描述文字
    "label",
    //Boolean是否check，没有值只用来显示
    "checked",
    //Boolean 是否禁用
    "disabled"
  ],
  computed: {
    isChecked() {
      return (
        this.checked ||
        (this.valueIsArray
          ? this.value.indexOf(this.cvalue) !== -1
          : this.value)
      );
    }
  },
  methods: {
    updateValue(e) {
      if (this.disabled) {
        return;
      }
      var checked;
      if (this.valueIsArray) {
        //数组同步值
        checked = arrayToggle(this.value, this.cvalue);
      } else if (typeof this.value == "boolean") {
        //同步boolean值
        checked = !this.value;
        this.$emit("input", checked);
      } else {
        //使用checked
        checked = !this.checked;
      }
      this.$emit("change", checked, this.value);
    }
    // stopPropagation(e){
    //   e.stopPropagation();
    // }
  },
  created() {
    //值是不是数组
    this.valueIsArray = Array.isArray(this.value);
  }
};
</script>
<style lang="scss">
.rx-checkbox {
  position: relative;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  box-sizing: border-box;

  &.is-checked {
    .rx-checkbox__inner {
      background-color: #5991ff;
      border-color: #5991ff;

      &::after {
        transform: rotate(45deg) scaleY(1);
      }
    }
  }
  &.is-disabled {
    cursor: default;

    .rx-checkbox__inner {
      background-color: #edf2fc;
      border-color: #dcdfe6;
      &:hover{
        border-color: #dcdfe6;
      }
      &::after {
        border-color: #c0c4cc;
      }
    }
    .rx-checkbox__label {
      color: #c0c4cc;
    }
  }
}
.rx-checkbox__box {
  display: inline-block;
  vertical-align: middle;
  // line-height: 1;
}
.rx-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid #c4cad7;
  border-radius: 2px;
  width: 1em;
  height: 1em;
  background-color: #fff;
  z-index: 1;
  vertical-align: middle;
  transition: all .3s;
  &:hover{
    border-color: #5991ff;
  }

  &::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 0.5em;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transform-origin: center;
  }
}
.rx-checkbox__label {
  display: inline-block;
  vertical-align: middle;
}
</style>
